<template>
  <div class="dashboard">
    <!-- 轮播图 -->
    <el-row class="carousel-section">
      <el-col :span="24">
        <el-carousel :interval="5000" arrow="always" indicator-position="outside">
          <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
            <img :src="item.image" alt="carousel" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <!-- 图表统计 -->
    <el-row class="section">
      <el-col :span="24">
        <div class="section-title">关键数据统计</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div ref="barChart" class="chart-container">
              <div class="chart-title">活动报名人数</div>
              <div class="chart" style="height: 300px;"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div ref="lineChart" class="chart-container">
              <div class="chart-title">活动签到人数</div>
              <div class="chart" style="height: 300px;"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div ref="pieChart" class="chart-container">
              <div class="chart-title">用户来源</div>
              <div class="chart" style="height: 300px;"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      carouselItems: [
        { image: require('@/assets/images/1.png') },
        { image: require('@/assets/images/2.png') },
        { image: require('@/assets/images/3.png') },
        { image: require('@/assets/images/4.png') }
      ]
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 柱状图
      const barChart = echarts.init(this.$refs.barChart.querySelector('.chart'));
      barChart.setOption({
        title: {
          text: '活动报名人数',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          data: ['星河誓约', '凤冠霞帔', '缘定今生','浪漫梦']
        },
        yAxis: {},
        series: [
          {
            name: '报名人数',
            type: 'bar',
            data: [0, 0, 0, 0 ],
            itemStyle: {
              color: '#6EA8E3'
            }
          }
        ]
      });

      // 折线图
      const lineChart = echarts.init(this.$refs.lineChart.querySelector('.chart'));
      lineChart.setOption({
        title: {
          text: '活动签到人数',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          data: ['星河誓约', '凤冠霞帔', '缘定今生','浪漫梦']
        },
        yAxis: {},
        series: [
          {
            name: '签到人数',
            type: 'line',
            data: [0, 0, 0, 0 ],
            itemStyle: {
              color: '#FFD700'
            }
          }
        ]
      });

      // 饼图
      const pieChart = echarts.init(this.$refs.pieChart.querySelector('.chart'));
      pieChart.setOption({
        title: {
          text: '用户来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '用户来源',
            type: 'pie',
            data: [
              { value: 0, name: '微信绑定', itemStyle: { color: '#6EA8E3' } },
              { value: 0, name: '手机注册', itemStyle: { color: '#FFD700' } },
              { value: 0, name: '其他', itemStyle: { color: '#3180CF' } }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

.carousel-section {
  margin-bottom: 20px;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  margin: 20px 0;
  color: #333;
}

.chart-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.chart-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.chart {
  width: 100%;
}
/* 轮播图容器 */
.carousel-section {
  margin-bottom: 20px;
  border-radius: 12px; /* 设置圆角 */
  overflow: hidden; /* 确保内容不会溢出 */
}

/* 轮播图图片 */
.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px; /* 设置圆角 */
}

/* 轮播图指示器 */
.el-carousel__indicator {
  margin: 0 8px; /* 调整指示器间距 */
}

/* 轮播图指示器按钮 */
.el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%; /* 设置为圆形 */
  background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

/* 轮播图指示器按钮（激活状态） */
.el-carousel__button.is-active {
  background-color: rgba(255, 255, 255, 1); /* 激活状态的背景颜色 */
}
</style>